<template>
  <div>
    <!-- 导航栏 -->
    <div class="headerBar_navmenu">
      <el-menu :default-active="active" mode="horizontal">
        <el-menu-item
          index="1"
          @click="pushChildRouter('/view/find/recommend', '个性推荐', '1')"
          >个性推荐</el-menu-item
        >
        <el-menu-item
          index="2"
          @click="pushChildRouter('/view/find/commission', '专属定制', '2')"
          >专属定制</el-menu-item
        >
        <el-menu-item
          index="3"
          @click="pushChildRouter('/view/find/musiclist', '歌单', '3')"
          >歌单</el-menu-item
        >
        <el-menu-item
          index="4"
          @click="pushChildRouter('/view/find/leaderboard', '排行榜', '4')"
          >排行榜</el-menu-item
        >
        <el-menu-item
          index="5"
          @click="pushChildRouter('/view/find/singer', '歌手', '5')"
          >歌手</el-menu-item
        >
        <el-menu-item
          index="6"
          @click="pushChildRouter('/view/find/newest', '最新音乐', '6')"
          >最新音乐</el-menu-item
        >
      </el-menu>
    </div>

    <!-- 子路由 -->
    <div class="router">
      <router-view
        @getSonglistId="pushSonglistPage"
        @getAlbumlistId="pushAlbumlistPage"
        @pushOtherPage="pushOtherChildPage"
        @getUserDetailInfo="pushUserDetailPage"
        @getSongerDetailInfo="pushSongerDetailPage"
        @keepRouterHighlight="keepChildRouter"
        @getRecommendsongsPageInfo="pushRecommendSongsPage"
      ></router-view>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
  props: {
    data: Object,
  },
  data() {
    return {
      // 高亮
      active: '1',
    }
  },

  created() {
    this.routerIsActiveInfo()
  },
  methods: {
    ...mapMutations(['changeIsActive']),

    // 子传父函数，接收传递过来的 侧边栏信息
    routerIsActiveInfo() {
      const isActive = 'findmusic'
      this.changeIsActive(isActive)
    },
    //   跳转到子路由
    pushChildRouter(path, name, active) {
      this.active = active
      this.$router.push({
        path: path + '?thePage=' + name,
      })
    },

    /**
     * 以下为子传父处理函数
     */
    // 跳转到歌单页面
    pushSonglistPage(data) {
      // console.log(data)
      this.$emit('getSonglistId', data)
    },
    // 跳转到每日推荐歌曲页面
    pushRecommendSongsPage(data) {
      this.$emit('getRecommendsongsPageInfo', data)
    },
    // 传递歌单数据
    fetchPlaySongListInfo(data) {
      this.$emit('getPlaySongListInfo', data)
    },
    //   跳转到子路由
    pushOtherChildPage(data) {
      this.active = data.active
      this.$router.push({
        path: data.path + '?thePage=' + data.name,
      })
    },
    // 保持状态栏高亮
    keepChildRouter(data) {
      this.active = data
    },
    // 跳转到用户个人页面
    pushUserDetailPage(data) {
      this.$emit('getUserDetailInfo', data)
    },
    // 跳转到歌手详情页面
    pushSongerDetailPage(data) {
      this.$emit('getSongerDetailInfo', data)
    },
    // 传递专辑信息
    pushAlbumlistPage(data) {
      this.$emit('getAlbumlistId', data)
    },
  },
}
</script>

<style lang="less" scoped>
.headerBar_navmenu {
  margin-left: 26px;
  margin-bottom: 8px;

  /deep/ ul.el-menu {
    border-bottom: 0px;
  }
  /deep/ li.el-menu-item {
    height: 48px;
    font-size: 16px;
    padding: 0 10px;
  }
  /deep/ li.el-menu-item.is-active {
    font-size: 18px;
    font-weight: 700;
    border-bottom: 3.6px solid red;
  }
}

.router {
  padding-left: 26px;
  padding-right: 26px;
}
</style>